<template>
    <div class="QilinTree beauty-scrollbar-y">
        <el-tree
            ref="treeRef"
            :data="ownTreeConfig.data"
            :props="ownTreeConfig.props"
            :show-checkbox="ownTreeConfig.itemConfig?.showCheckbox || false"
            :node-key="ownTreeConfig.itemConfig?.nodeKey || 'id' "
            :check-on-click-node="ownTreeConfig.itemConfig?.checkOnClickNode ?? true "
            :current-node-key="ownTreeConfig.itemConfig?.currentNodeKey || '' "
            :highlight-current="ownTreeConfig.itemConfig?.highlightCurrent ?? true"
            :default-checked-keys="ownTreeConfig.itemConfig?.defaultCheckedKeys || [] "
            :default-expanded-keys="ownTreeConfig.itemConfig?.defaultExpandedKeys || [] "
            :default-expand-all="ownTreeConfig.itemConfig?.defaultExpandAll || false"
            :check-strictly="ownTreeConfig.itemConfig?.checkStrictly || false"
            :filter-node-method="ownTreeConfig.itemConfig?.filterNodeMethod"
            @check-change="ownTreeConfig.itemConfig?.checkChange"
            @current-change="ownTreeConfig.itemConfig?.currentChange"
            @node-click="ownTreeConfig.itemConfig?.nodeClick"
            @check="ownTreeConfig.itemConfig?.check"
        ></el-tree>
    </div>
</template>

<script setup>
import {defineOptions,ref,computed} from "vue";

defineOptions({
    name:"QilinTree"
});

/*
    数据变量定义区域
*/
// 获取当前树组件DOM元素
const treeRef=ref(null);


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    treeConfig:{
        type:Object,
        default(){
            return {
                itemConfig:{
                    showCheckbox:false, //是否显示复选框
                    nodeKey:"id", //每个树节点用来作为唯一标识的属性
                    checkOnClickNode:true, //是否在点击节点的时候选中节点，默认只有在点击复选框才会选中节点
                    currentNodeKey:"", //当前选中的节点
                    highlightCurrent:true, //是否高亮当前选中节点
                    defaultCheckedKeys:[], //默认选中的节点key的数组
                    defaultExpandedKeys:[], //默认展开的节点key的数组
                    defaultExpandAll:false, //是否默认展开所有节点
                    checkStrictly:false, //是否严格遵循父子不互相关联
                    filterNodeMethod:"", //过滤树节点方法
                    checkChange:"", //event事件
                    currentChange:"", //event事件
                    nodeClick:"", //event事件
                    check:"", //event事件
                },
                props:{},
                data:[], //展示的数据
            };
        }
    }
});

// 暴露父组件自定义方法
const emits=defineEmits(["update:treeConfig"]);

// 组件自身的配置项
let ownTreeConfig=computed({
    get(){
        return propsValue.treeConfig;
    },
    set(val){
        emits("update:treeConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/
// 调用el-tree的setCheckedNodes事件监听-设置目前勾选的节点，使用此方法必须提前设置node-key属性，参数为节点构成的数组
const setCheckedNodes=(nodes)=>{
    treeRef.value.setCheckedNodes(nodes);
};
// 调用el-tree的filter事件监听-过滤所有树节点，过滤后的节点将被隐藏；接收一个参数并指定为 filter-node-method 属性的第一个参数
const filter=(value)=>{
    treeRef.value.filter(value);
};
// 调用el-tree的setChecked事件监听-设置节点是否被选中，使用此方法必须设置node-key属性
const setChecked=(key,checked,deep)=>{
    treeRef.value.setChecked(key,checked,deep);
};
// 调用el-tree的setCheckedKeys事件监听-设置目前勾选的节点，使用此方法必须提前设置node-key属性，
// (keys, leafOnly) 接收两个参数: 1. 一个需要被选中的多节点 key 的数组 
// 2. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false.
const setCheckedKeys=(keys, leafOnly)=>{
    treeRef.value.setCheckedKeys(keys, leafOnly);
};
// 调用el-tree的getCheckedKeys事件监听-若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组；
// (leafOnly) 接收一个布尔类型参数，默认为 false. 如果参数是 true, 它只返回当前选择的子节点数组。
const getCheckedKeys=(leafOnly)=>{
    return treeRef.value.getCheckedKeys(leafOnly);
};
// 调用el-tree的getCheckedNodes事件监听-如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组；
// (leafOnly, includeHalfChecked) 接收两个布尔类型参数: 
// 1. 默认值为 false. 若参数为 true, 它将返回当前选中节点的子节点 
// 2. 默认值为 false. 如果参数为 true, 返回值包含半选中节点数据
const getCheckedNodes=(leafOnly, includeHalfChecked)=>{
    return treeRef.value.getCheckedNodes(leafOnly, includeHalfChecked);
};


/*
    生命周期等代码区域
*/
// 暴露子组件的自定义方法
defineExpose({
    setCheckedNodes,
    filter,
    setChecked,
    setCheckedKeys,
    getCheckedKeys,
    getCheckedNodes
});

</script>

<style lang="scss" scoped>
.QilinTree{
    :deep(>.el-tree){
        .el-icon.expanded{
            color:$primary-text-color;
        }
    }
}
</style>
